<template>
  <div class="home-container">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>欢迎使用微前端示例</span>
        </div>
      </template>
      <div class="card-content">
        <p>这是一个使用 qiankun 搭建的微前端示例项目，展示了以下功能：</p>
        <ul>
          <li>主应用与子应用的基础架构</li>
          <li>应用间的路由跳转</li>
          <li>全局状态管理</li>
          <li>应用间通信</li>
        </ul>
      </div>
    </el-card>

    <el-card class="state-card">
      <template #header>
        <div class="card-header">
          <span>全局状态示例</span>
        </div>
      </template>
      <div class="card-content">
        <div class="state-item">
          <span>计数器：{{ count }}</span>
          <el-button type="primary" @click="increment">增加</el-button>
        </div>
        <div class="state-item">
          <span>消息：{{ message }}</span>
          <el-button type="success" @click="sendMessage">发送消息</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";

const store = useStore();

const count = computed(() => store.state.count);
const message = computed(() => store.state.message);

const increment = () => {
  store.commit("increment");
};

const sendMessage = () => {
  store.dispatch(
    "updateMessage",
    `来自主应用的消息：${new Date().toLocaleString()}`
  );
};
</script>

<style lang="scss" scoped>
.home-container {
  .el-card {
    margin-bottom: 20px;
  }
  .card-header {
    font-weight: bold;
  }
  .card-content {
    ul {
      padding-left: 20px;
      li {
        line-height: 1.8;
      }
    }
  }
  .state-card {
    .state-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
      span {
        margin-right: 15px;
      }
    }
  }
}
</style>
